<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>data_methods_computed总结</title>
</head>
<body>
    <div id="root">
        <h2>{{x}}</h2>
        <h2>{{y()}}</h2>
        <h2>{{z}}</h2>
        <button @click='y'>点我调用y</button> <br><br>
        展示x的值：<input type="text" v-model='x'>
    </div>
    <script>
        const vm = new Vue({
            el:"#root",//指容器服务定vm为哪个
            data:{//驱动页面显示的数据都放在这
                x:100,//x最终通过数据代理绑定到vm上
            },
            methods:{//所有用到的函数配置都在这
                y(){//y直接被放在vm身上
                    console.log('y被调用了');
                    return 200;
                }
            },
            computed:{
                z:{//z直接被挂在到vm上了
                    set(value){
                        console.log('有人修改z的值');
                    },
                    get(){//读取z的值时被调用，同时所依赖的属性发生变化时也被调用(前提时页面有用到z)
                        console.log('有人获取z的值');
                        return 100;
                    }
                }
            }
            //computed和methods对比，computed由缓存
        });
    </script>
</body>
</html>